<template>
    <div class="card-box">
        <div class="card-title">
            <span>联系人信息</span>
            <el-col :span="2" v-show='showbutton'>
                <el-button type="text" @click="addRow">新增</el-button>  |<el-button  type="text" @click="delRow">删除</el-button>
            </el-col>
        </div>
        <div class="margin-box">
            <!-- 新增table -->
            <el-form :rules="form.rules"  :model="form" status-icon  ref="form" >
                <el-table  :data="form.editPersons" ref="addTable" align="center">
                    <el-table-column type="selection"/>
                    <el-table-column  label="序号" width="60" type="index"/>
                    <el-table-column  label="姓名">
                        <template slot-scope="scope">
                            <el-form-item :prop="'editPersons.' + scope.$index + '.name'"  :rules="form.rules.name">
                                <el-input class="ipt" v-model="scope.row.name" maxlength="24" placeholder="请输入姓名,最长为24位，不可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="电话">
                        <template slot-scope="scope">
                            <el-form-item  :prop="'editPersons.' + scope.$index + '.phone'"  :rules="form.rules.phone">
                                <el-input class="ipt" v-model="scope.row.phone" maxlength="11" placeholder="请输入11位手机号码，不可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="部门" >
                        <template slot-scope="scope">
                            <el-form-item  :prop="'editPersons.' + scope.$index + '.departmentName'"   :rules="form.rules.departmentName">
                                <el-input class="ipt" v-model="scope.row.departmentName" maxlength="18" placeholder="请输入部门，最长为18位,不可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="职务" >
                        <template slot-scope="scope">
                            <el-form-item  :prop="'editPersons.' + scope.$index + '.position'" :rules="form.rules.position" >
                                <el-input class="ipt" v-model="scope.row.position" maxlength="18" placeholder="请输入职位，最长为18位,不可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" >
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input class="ipt" v-model="scope.row.remarks" maxlength="100" placeholder="备注可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {fetchList,getByClientLesseeId} from '@/views/client-manage/api/clientlesseelinkinfo'
    import {validatePhone,validateEmail,validateIdNo} from '~/utils/validate'
    export default {
        name: "person-info",
        props: {
            pid: {
                type: String
            },
            showbutton: {
                type: Boolean,
                default: true
            },
            // 是否新增
            isAdd: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            return {
                formVerify: true,
                clientLesseeId:'',
                //校验
                form:{
                    editPersons:[],
                    rules:{
                        name: [{ required: true, message: "名字不能为空，最长为24位", trigger: "blur" }],
                        phone: [
                            { required: true, message: "电话号码不能为空", trigger: "blur" },
                            {validator:validatePhone,trigger: "change"},
                            {validator:validatePhone,trigger: "blur"}
                        ],
                        departmentName:[
                            { required: true, message: "部门不能为空，最长为18位", trigger: "blur" },
                        ],
                        position:[
                            { required: true, message: "职业不能为空，最长为18位", trigger: "blur" },
                        ],
                    }
                }
            }
        },
        mounted() {
            this.clientLesseeId=this.pid;
            // 只有存在pid且是编辑场景才请求联系人信息数据
            this.pid && !this.isAdd && this.queryList();
        },
    /*    watch: {
            form: {
                handler: function (val, oldVal) {
                    this.$nextTick(()=>{
                        this.$refs.form.validate(valid => {
                            this.formVerify = (val.editPersons.length == 0 ? true : valid)

                        })
                    })
                },
                deep: true,
            },
        },*/
    /*    computed:{
            // 表单手动校验
            /!*formVerify(){
                if(this.form.editPersons.length == 0) return true;
                let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                return this.form.editPersons.every(item => {
                    return item.name && item.phone && item.departmentName && item.position && phoneReg.test(item.phone)
                })
            }*!/
            formVerify(){
                this.$refs.form.validate(valid => {
                    return this.form.editPersons==false? true: valid
                })
            }
        },*/
        methods: {
            // 添加行
            addRow(){
                this.form.editPersons.push({
                    index: this.form.editPersons.length,
                    name: '',
                    phone: '',
                    departmentName: '',
                    position: '',
                    remarks: '',
                })
            },
            // 删除行
            delRow(){
                if(this.form.editPersons.length>0){
                    if(this.$refs.addTable!=undefined || this.$refs.addTable!=null){
                        let addTables = this.$refs.addTable.selection.map(item => item.index)
                        let editPersons = this.form.editPersons.filter(item => !addTables.includes(item.index))
                        this.form.editPersons = editPersons.map((item,index) => {
                            item.index = index
                            return item
                        })
                    }
                }
            },
            // 获取数据
            queryList(clientLesseeId = this.pid){
                getByClientLesseeId({clientLesseeId}).then(respdata=>{
                    let data = respdata.data.data.map((item, index) => ({...item, index}))
                    if(data && data.length) {
                        this.form.editPersons = [...data]
                    }
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .ipt{
        margin-top:18px
    }
</style>
